<template>
  <div>
    <div style="text-align: center">学生管理页面</div>
    <p></p>
    <button v-on:click="getAllStudents">获取全部学生</button>
    <div v-for="student in students" v-bind:key=student.id>
      {{student}}
    </div>
    <p></p>
    <div>请输入查询学生信息的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getStudentById">通过id获取指定学生</button>
    <div>{{studentById}}</div>
    <p></p>
    <div>请输入要添加的学生信息：
      <div>
        student_id:
        <input v-model="addstudentid">
      </div>
      <div>
        name:
        <input v-model="addstudentname">
      </div>
      <div>
        class:
        <input v-model="addclass">
      </div>
      <div>
        telephone:
        <input v-model="addtelephone">
      </div>
      <div>
        qq:
        <input v-model="addqq">
      </div>
    </div>
    <button v-on:click="addUser">添加学生</button>
    <p></p>
    <div>
      请输入要修改的学生信息：
      <div>
        id:
        <input v-model="id">
      </div>
      <div>
        student_id:
        <input v-model="updatestudentid">
      </div>
      <div>
        name:
        <input v-model="updatestudentname">
      </div>
      <div>
        class:
        <input v-model="updateclass">
      </div>
      <div>
        telephone:
        <input v-model="updatetelephone">
      </div>
      <div>
        qq:
        <input v-model="updateqq">
      </div>
    </div>
    <button v-on:click="updateStudent">修改学生</button>
    <p></p>
    <div>
      请输入删除学生的id：
      <input v-model="deleteId">
      <div>
        <button v-on:click="deleteStudent">删除用户</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "StudentPage",
  data() {
    return {
      students: null,
      queryId: null,
      studentById: null,
      addstudentid:null,
      addstudentname: null,
      addclass: null,
      addtelephone:null,
      addqq:null,
      updatestudentid:null,
      updatestudentname: null,
      updateclass: null,
      updatetelephone:null,
      updateqq:null,
      id: null
    }
  },
  methods: {
    getAllStudents() {
      axios.get("http://localhost:8082/AllStudents")
          .then(resp => {
            console.log(resp);
            this.students= resp.data;
          })
    },
    getStudentById() {
      axios.get(`http://localhost:8082/student/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.studentById = resp.data;
          })
    },
    addUser() {
      axios.post("http://localhost:8082/student", {
        student_id: this.addstudentid,
        name: this.addstudentname,
        class: this.addclass,
        telephone: this.addtelephone,
        qq: this.addqq
      })
          .then(resp => {
            console.log(resp);
          })
    },
    updateStudent() {
      axios.put("http://localhost:8082/student", {
        id: this.id,
        student_id: this.updatestudentid,
        name: this.updatestudentname,
        class: this.updateclass,
        telephone: this.updatetelephone,
        qq: this.updateqq
      }).then(resp => {
        console.log(resp);
      })
    },
    deleteStudent() {
      axios.delete("http://localhost:8082/student", {
        params: {
          id: this.deleteId
        }
      }).then(resp => {
        console.log(resp);
      })
    },
  }
}
</script>

<style scoped>

</style>